<template>
	<view class="">
		<das-ipt prompt="请输入联系人" @SearchEvents="search" v-if="isUser===false"></das-ipt>
		<!-- 公司员工 -->
		<view class="tabs" v-if="isUser===false">
			<template v-for="i,index in tabs">
				<view class="item-tab" @tap="cut(i.id,index)" :key="index" :class="active==i.id?'select':''">
					<image class="item-icon" :src="i.img" mode=""></image>
					<text>{{i.name}}</text>
				</view>
			</template>
		</view>
		<view class="">

			<!-- 用户通讯录 -->
			<template v-for="item,index in list">
				<!-- 驻村安全员 -->
				<view class="safety-officer" v-if="isUser===true">
					<view class="list-title">
						<image src="/static/aqy.png" mode=""></image>
						<text class="title">驻村安全员</text>
					</view>
					<!-- 子项 -->
					<view class="list-item" v-for="i,index in item.safter" :key="index">
						<view class="listItem phone">
							<text class="name">{{i.address}}</text>
							<text class="name">{{i.realname}}</text>
							<view class="phone-num" @tap="daMobile(i.mobile)">
								<image class="phone-icon" src="/static/dianhua2.png" mode="widthFix"></image>
								<text class="number">{{i.mobile}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 村内协管员 -->
				<view class="safety-officer" v-if="isUser===true">
					<view class="list-title">
						<image src="/static/aqy.png" mode=""></image>
						<text class="title">村内协管员</text>
					</view>
					<!-- 子项 -->
					<view class="list-item" v-for="i,index in item.assistant" :key="index">
						<view class="listItem phone">
							<text class="name">{{i.address}}</text>
							<text class="name">{{i.realname}}</text>
							<view class="phone-num" @tap="daMobile(i.mobile)">
								<image class="phone-icon" src="/static/dianhua2.png" mode="widthFix"></image>
								<text class="number">{{i.mobile}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 驻村安全员 -->
				<view class="safety-officer" v-if="isUser===true">
					<view class="list-title">
						<image src="/static/qiye.png" mode=""></image>
						<text class="title">公司电话</text>
					</view>
					<!-- 子项 -->
					<view class="list-item">
						<view class="listItem phone" :class="{displayGrid: isUser===true}">
							<text class="name">{{item.company.realname}}</text>
							<view class="phone-num" @tap="daMobile(item.company.mobile)">
								<image class="phone-icon" src="/static/dianhua2.png" mode="widthFix"></image>
								<text class="number">{{item.company.mobile}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>

			<!-- <template v-for="i,index in list" v-show="permissions===false">
				<view class="phone" :key="index" :class="{ displayGrid: permissions===false }">
					<text class="name" >公司电话: 0318-3881118</text>
					<text class="name">北京镇村北京镇村北京镇村</text>
					<text class="name">{{i.realname}}</text>
					<view class="phone-num" @tap="daMobile(i.mobile)">
						<image class="phone-icon" src="/static/dianhua2.png" mode="widthFix"></image>
						<text class="number">{{i.mobile}}</text>
					</view>
				</view>
			</template> -->


			<template v-for="i,index in list">
				<view class="phone" :key="index" v-if="isUser===false">
					<!-- :class="{ displayGrid: permissions===false }" -->
					<!-- <text class="name" v-show="permissions===false">公司电话: 0318-3881118</text> -->
					<text class="name">{{i.address}}</text>
					<text class="name">{{i.realname}}</text>
					<view class="phone-num" @tap="daMobile(i.mobile)">
						<image class="phone-icon" src="/static/dianhua2.png" mode="widthFix"></image>
						<text class="number">{{i.mobile}}</text>
					</view>
				</view>
			</template>
		</view>
		<view class="h100"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						id: 1,
						name: '员工',
						img: '/static/aqy.png'
					},
					{
						id: 2,
						name: '村内协管员',
						img: '/static/aqy.png'
					},
					{
						id: 3,
						name: '村内安全员',
						img: '/static/aqy.png'
					}
				],
				xgy: [{
						id: 2,
						name: '村内协管员',
						img: '/static/aqy.png'
					},
					{
						id: 3,
						name: '村内安全员',
						img: '/static/aqy.png'
					}
				],
				active: 1,
				value: '',
				page: 1,
				list: [],
				isUser: null,
			};
		},
		onLoad() {
			this.isUser = uni.getStorageSync('login') == '用户' ? true : false

			var permissions = uni.getStorageSync('login') == '员工' ? true : false
			if (!permissions) {
				this.tabs = this.xgy
				this.active = 2
			}
			this.getData()
		},
		onShow() {

		},
		onReachBottom() {
			this.page++
			this.getData()
		},
		methods: {
			clearPageOrArr() {
				this.page = 1
				this.list = []
			},
			cut(id, index) {
				this.active = id
				this.clearPageOrArr()
				this.getData()
			},
			search(e) {
				this.value = e
				this.clearPageOrArr()
				this.getData()
			},
			daMobile(num) {
				num && uni.makePhoneCall({
					phoneNumber: num
				});
			},
			getData() {
				let that = this
				that.$request.request({
					url: '/Village/get_mobile1',
					method: 'POST',
					data: {
						token: uni.getStorageSync('token'),
						type: that.active,
						searchname: that.value,
						page: that.page
					}
				}).then(res => {
					that.value = ''
					res.data.code && (that.list = that.list.concat(res.data.data))
					console.log('that.list', that.list);
				})
			},
		},

	}
</script>

<style lang="scss" >
	page {
		background: #F1F1F1;
	}

	.tabs {
		display: flex;

		.item-tab {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 100rpx;
			background: rgba(153, 153, 153, 0.1);

			.item-icon {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.select {
			color: #003690;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 80%;
				height: 2rpx;
				background: #003690;
			}
		}
	}

	.phone {
		margin: 0 auto;
		background: #FFFFFF;
		border-bottom: 1rpx solid #999999;
		padding: 26rpx 24rpx;
		width: 100%;
		display: grid;
		grid-template-columns: 320rpx 96rpx 250rpx;
		column-gap: 10rpx;


		.phone-num {
			display: flex;
			align-items: center;

			.phone-icon {
				width: 36rpx;
			}

			.number {
				margin-left: 20rpx;
				color: #999999;
			}
		}
	}

	.h100 {
		height: 100rpx;
	}

	.safety-officer {
		margin-top: 24rpx;
		padding: 16rpx 24rpx;
		background-color: #fff;


		view:last-child {
			border: none;
		}


		.listItem {
			border-bottom: 1rpx solid #EEEEEE;
		}

		.list-title {
			display: flex;
			align-items: center;

			image {
				width: 38rpx;
				height: 38rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 28rpx;
				font-family: Source Han Sans SC;
				font-weight: 500;
				color: #003690;
			}
		}
	}

	.displayGrid {
		width: 100%;
		display: grid;
		grid-template-columns: 420rpx 250rpx;
		column-gap: 10rpx;
	}
</style>
